import React, { Component } from 'react';
import styles from './css/ReduxStatus.module.css';

import { connect } from 'react-redux'
import { SORT_BASE_SET,updataNumType, updataCountType } from './redux/redux.js';

class ReduxStatus extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            num: 0,
            total: 0
        }
    }

    updataDateCount(e) {
        console.log(e.target.value);
        this.setState({
            count: e.target.value
        })
        this.props.updataDateCount({ count: e.target.value });
    }

    updataDateNum(e) {
        this.setState({
            num: e.target.value
        });
        this.props.updataDateNum({ num: e.target.value });
    }
    render() {
        return (
            <div>
                ReduxStatus
                <div className={styles.container}>
                    <p className={styles.inputItem}>
                        <label htmlFor='count'>count:</label>
                        <input onChange={(e) => this.updataDateCount(e)} type='number' id='count' />
                        <span>this.state的值:{this.state.count}</span>
                        <span>redux里面的值:{this.props.count}</span>
                    </p>
                    <p className={styles.inputItem}>
                        <label htmlFor='num'>num:</label>
                        <input onChange={(e) => this.updataDateNum(e)} type='number' id='num' />
                        <span>this.state的值:{this.state.num}</span>
                        <span>redux里面的值:{this.props.num}</span>
                    </p>
                    <p className={styles.inputItem}>
                        <label htmlFor='total'>total:</label>
                        <input readOnly type='number' value={this.props.total} id='total' />
                    </p>
                </div>
            </div>
        )
    }
}

export default connect(
    (state) => ({
        total: state[SORT_BASE_SET.redux].total,
        num:state[SORT_BASE_SET.redux].num,
        count:state[SORT_BASE_SET.redux].count
    }),
    (dispatch) => ({
        updataDateCount: (data) => dispatch({ type: updataCountType, ...data }),
        updataDateNum: (data) => dispatch({ type: updataNumType, ...data }),
    })
)(ReduxStatus);